<template>
  <!-- 大main -->
  <el-container class="main">
    <!-- 左侧的菜单 -->
    <el-aside :width="isCollapse ? '60px' : '210px'" class="main-aside">
      <nav-menu :isCollapse="isCollapse"></nav-menu>
    </el-aside>
    <!-- 右侧显示区域 -->
    <el-container class="main-container">
      <!-- 最上方的简洁信息显示区 -->
      <el-header class="container-header">
        <nav-header
          ref="navHeaderRef"
          @foldChange="handleFoldChange"
        ></nav-header>
      </el-header>
      <!-- 主要显示区域 -->
      <el-main class="container-content">
        <router-view class="routerView1"></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

// import localCache from '@/utils/cache';
import navMenu from './cpns/nav-menu.vue';
import navHeader from './cpns/nav-header.vue';

export default defineComponent({
  components: {
    navMenu,
    navHeader
  },
  setup() {
    const navHeaderRef = ref<InstanceType<typeof navHeader>>();
    // console.log(navHeaderRef.value?.isFoldMenu); // 可以拿到,但是我们没有给他keep-alive,他已经死了,拿了已经undefined.

    // 是否打开关闭menu侧边栏
    let isCollapse = ref(false);
    const handleFoldChange = (isFoldMenu: boolean) => {
      isCollapse.value = isFoldMenu;
    };

    // main页面消失时将menu设置为第一页 (失败了, onUnmounted不执行)
    /* onUnmounted(() => {
      console.log(123);
      localCache.setCache('menuDefaultActive', '39');
    }); */

    return {
      navHeaderRef,
      handleFoldChange,
      isCollapse
    };
  }
});
</script>

<style scoped lang="less">
.main {
  width: 1280px;
  height: 100%;
  margin: 0 auto;
  background-color: #f0f2f5;
  .main-aside {
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    height: 100%;
    background-color: #001529;
    transition: all 0.5s;
  }
  .main-container {
    height: 100%;
    .container-header {
      height: 38px;
      background-color: #fff;
    }
    .container-content {
      .routerView1 {
        background-color: #fff;
      }
    }
  }
}
</style>
